<template>
    <div>
        <el-dialog :visible.sync="PurchaseDialogVisible" title="新增采购订单" width="80%" top="10vh">
      <el-form ref="form" :model="form" label-width="80px" inline>
        <el-form-item label="订单号">
          <el-input v-model="form.purchase_order_code " placeholder="请输入订单号" size="small" />
        </el-form-item>
        <el-form-item label="供应商">
          <el-select v-model="form.vendor" placeholder="请选择供应商" size="small" />
        </el-form-item>
        <el-form-item label="订单日期">
          <el-date-picker v-model="form.order_date" type="date" placeholder="选择日期" size="small" />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="form.status" placeholder="请选择订单状态" size="small">
            <el-option label="已下单" value="已下单" />
            <el-option label="已发货" value="已发货" />
            <el-option label="已完成" value="已完成" />
          </el-select>
        </el-form-item>
      </el-form>
      <el-card class="cardTable">
        <el-table
          ref="multipleTable"
          stripe
          border
          height="65vh"
          :header-cell-style="{background:'#eef1f6',color:'#606266' }"
          :data="orderDetailData"
          :row-style="{height: '0px'}"
          :cell-style="{padding: '0px'}"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          :default-sort = "{prop: 'date', order: 'descending'}"
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            v-for="(item, index) in detailKeys"
            v-if="item.visible"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            sortable
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="150"
          >
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-edit" @click="editPurchaseOrder(scope.row)">编辑</el-button>
              <el-button type="text" icon="el-icon-delete" @click="PurchaseDialogVisible(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return {
            detailKeys:[]
        }
    },
    props:['detailKeys']
}
</script>